<template>
    <div class="order-details">
        <div class="breadcrumb">
            <RouterLink class="plain-link breadcrumb-link" :to="{ name: '/home/orders-management' }">
                {{ t('home.menu.orders') }}
            </RouterLink>
            / {{ t('home.detailPage') }}
        </div>
        <div class="order-content">
            <div class="order-title">{{ t('orders.orderDetails') }}</div>
            <div class="order-status mt20">{{ orderStatus }}</div>
            <div v-if="orderDetails.status === 3" class="order-status-step mt20">
                <div class="order-step-2">{{ t('orders.steps.submitted') }}</div>
                <div class="order-step-2">{{ t('orders.steps.accepted') }}</div>
                <div class="order-step-2">{{ t('orders.steps.confirmed') }}</div>
                <div class="order-step-2">{{ t('orders.steps.done') }}</div>
            </div>
            <div v-else-if="orderDetails.status === 2" class="order-status-step mt20">
                <div class="order-step-1">{{ t('orders.steps.submitted') }}</div>
                <div class="order-step-1">{{ t('orders.steps.accepted') }}</div>
                <div class="order-step-1">{{ t('orders.steps.confirmed') }}</div>
                <div class="order-step-1">{{ t('orders.steps.done') }}</div>
            </div>
            <div v-else class="order-status-step mt20">
                <div class="order-step-1">{{ t('orders.steps.submitted') }}</div>
                <div :class="[orderDetails.status === 1 ? 'order-step-2' : 'order-step-1']">
                    {{ t('orders.steps.accepted') }}
                </div>
                <div class="order-step-2">{{ t('orders.steps.confirmed') }}</div>
                <div class="order-step-2">{{ t('orders.steps.done') }}</div>
            </div>
            <div class="completion-time mt30">
                <div>{{ orderDetails.createTime || '--' }}</div>
                <div>{{ orderDetails.orderTime || '--' }}</div>
                <div>{{ orderDetails.completedTime || '--' }}</div>
                <div>{{ orderDetails.completedTime || '--' }}</div>
            </div>
            <div class="order-information mt30">
                <div class="order-information-img">
                    <img :src="thumbnail" />
                </div>
                <div class="order-information-name">
                    {{ orderDetails.serviceDetail ? orderDetails.serviceDetail.serviceName : '' }}
                </div>
                <div v-if="orderDetails.serviceDetail" class="order-information-spec">
                    <span
                        v-for="item in orderDetails.serviceDetail.specifications"
                        :key="item.specName"
                        style="
                            border-radius: 4px;
                            border: solid 1px #adb0b8;
                            font-size: 12px;
                            color: #666666;
                            padding: 0 3px;
                            margin-right: 5px;
                        "
                    >
                        {{ item.optionName }}
                    </span>
                </div>
                <div class="order-information-number">*{{ orderDetails.amount || '--' }}</div>
                <div class="order-information-price">￥{{ orderDetails.payment || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">{{ t('orders.serviceDetails') }}</div>
                <div class="server-info-font">{{ t('orders.fullName') }}：{{ orderDetails.customerName }}</div>
                <div class="server-info-font">{{ t('orders.tel') }}：{{ orderDetails.customerPhone }}</div>
                <div class="server-info-font">{{ t('orders.serviceTime') }}：{{ orderDetails.appointmentTime }}</div>
                <div class="server-info-font">{{ t('orders.address') }}：{{ orderDetails.address }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">{{ t('orders.workerInfo') }}</div>
                <div class="server-info-font">{{ t('orders.fullName') }}：{{ orderDetails.serverName || '--' }}</div>
                <div class="server-info-font">{{ t('orders.tel') }}：{{ orderDetails.serverPhone || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">{{ t('orders.detailedInfo') }}</div>
                <div class="server-info-font">{{ t('orders.orderId') }}：{{ orderDetails.orderNumber || '--' }}</div>
                <div class="server-info-font">{{ t('orders.comment') }}：{{ orderDetails.remark || '--' }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getOrderDetails } from '@/api/api.query.util';
import { useRoute, useRouter } from 'vue-router';
import { ref, reactive, computed } from 'vue';
import { t } from '@/i18n';

const thumbnail = require('@/assets/image/taylor-sondgeroth-ltsKOg_q_Gc-unsplash@2x.png');

const orderDetails = ref({});
const orderStatusId = ref(0);
const orderStatus = computed(() => {
    const statusNameMap = {
        0: '',
        1: t('orders.serviceStatus.toBeAccepted'),
        2: t('orders.serviceStatus.done'),
        3: t('orders.serviceStatus.canceled'),
        4: t('orders.serviceStatus.toBeConfirmed'),
    };
    return statusNameMap[orderStatusId.value];
});

const route = useRoute();

getOrderDetails({
    method: 'GET',
    data: {
        orderNumber: route.query.orderNumber,
    },
}).then((res) => {
    orderStatusId.value = res.result.status;
    orderDetails.value = res.result;
});
</script>

<style scoped>
.order-details {
    height: 100%;
    flex-grow: 1;
    padding: 20px 30px;
    background-color: var(--bg-default);
    border-radius: var(--border-radius);
}
.breadcrumb,
.breadcrumb-link {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}
.order-content {
    margin-top: 20px;
}
.order-title {
    font-size: 14px;
    color: #666666;
}
.order-status {
    color: #3ab0a2;
    font-size: 20px;
}
.order-status-step {
    width: 708px;
    height: 20px;
    background-color: #ebebeb;
    border-radius: 10px;
    display: flex;
}
.order-step-1 {
    font-size: 12px;
    width: 185px;
    height: 20px;
    background-color: #3ab0a2;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
}
.order-step-2 {
    font-size: 12px;
    height: 20px;
    width: 185px;
    line-height: 20px;
    text-align: center;
    color: #999999;
}
.completion-time {
    width: 708px;
    color: #333333;
    font-size: 12px;
    display: flex;
}
.completion-time div {
    width: 25%;
    text-align: center;
}

.order-information {
    border-top: solid 1px #ebebeb;
    display: flex;
    padding: 20px 0;
    width: 100%;
}
.order-information-img img {
    height: 44px;
    width: 44px;
}
.order-information-name {
    margin-left: 20px;
    color: #3ab0a2;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
}
.order-information-spec {
    margin-left: 80px;
    color: #666666;
    font-size: 12px;
    min-width: 200px;
    height: 44px;
    line-height: 44px;
}
.order-information-number {
    color: #666666;
    font-size: 12px;
    min-width: 120px;
    height: 44px;
    line-height: 44px;
}
.order-information-price {
    color: #666666;
    font-size: 12px;
    min-width: 120px;
    height: 44px;
    line-height: 44px;
}
.server-info {
    border-top: solid 1px #ebebeb;
    padding: 20px 0;
}
.server-info-title {
    font-size: 14px;
    color: #333333;
    line-height: 28px;
}
.server-info-font {
    font-size: 12px;
    color: #333333;
    line-height: 28px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
</style>
